<template>
	<view class="news-detail-con">
		<header-vue :back="true" :title="titleList[type]" titleSize="32rpx" titleColor="#333" id="headerH"></header-vue>
		<view class="box-con">
			<view class="title">公告标题</view>
			<view class="time">2025-9-11 15:15</view>
			<view class="con">公告内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
			</view>
		</view>

		<view class="copon-box">
			<!-- 领券消息 -->
	<!-- 		<view class="flex list-item">
				<view class="flex center column item-left">
					<view class="price font64"><text class="font48">¥</text>99</view>
					<view class="font24">满99减</view>
				</view>
				<view class="flex between" style="flex: 1;padding: 0 28rpx 0 20rpx;box-sizing: border-box;">
					<view>
						<view class="font30 fontbold-500 text-333" style="margin-bottom: 20rpx;">服务券</view>
						<view class="font24 text-999">2025.06.09 23:59-2025.06.12 23:59</view>
					</view>
				</view>
			</view>
			<view class="copon-list-box">
				<view class="flex-list-box font28 text-blue">
					<view class="list-left">领取人</view>
					<view class="list-center">领取状态</view>
					<view class="list-right">领取时间</view>
				</view>
				<view class="flex-list-box font24 text-666">
					<view class="list-left">王小明</view>
					<view class="list-center">待使用</view>
					<view class="list-right">2025.06.19 23:59</view>
				</view>
			</view> -->
			<!-- 订单消息 -->
			<!-- <view class="order-list">
				<view class="white-box margin32" @click="toOrderJ">
					<view class="flex start">
						<view class="order-dot"></view>
						<view>
							<view class="font28 text-333 ">订单已支付通知</view>
							<view class="font20 text-999 padding12">2025-01-07 18:12:30</view>
						</view>

					</view>
					<view class=" order-img-box padding10">
						<view class="order-img">
							<image :src="IMAGE_URL + '/static/banner.png'" mode="aspectFill"></image>
						</view>
						<view class="font24 fontbold-500 ellipsis" style="width: 100%;">空调清洗高温除尘菌让呼吸更清新空调清洗高温除尘菌让呼吸更清新
						</view>

					</view>
					<view class="flex between btn-top">
						<view class="font24 order-tips">查看详情</view>
						<view class="arrow-right">
							<image :src="IMAGE_URL + '/static/images/arrow.png'"></image>
						</view>
					</view>

				</view>
			</view> -->
			
		</view>

	</view>
</template>
<script>
	import headerVue from '@/components/header.vue';
	import appConfig from '@/config/app.js'
	export default {
		components: {
			headerVue
		},
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				type: 1,
				id: 0,
				titleList: {
					'1': '公告详情',
					'5': '审核详情'
				}
			}
		},
		onLoad(options) {
			this.type = options.type
			this.id = options.id
		}
	}
</script>
<style lang="scss" scoped>
	.text-333 {
		color: #333333;
	}

	.text-999 {
		color: #999999;
	}

	.text-666 {
		color: #666666;
	}

	.news-detail-con {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6;

		.box-con {
			margin: 28rpx 32rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 28rpx;

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			.time {
				font-size: 20rpx;
				color: #999999;
				margin: 12rpx 0 20rpx;
			}

			.con {
				font-size: 28rpx;
				color: #666666;
				text-align: justified;
			}
		}
	}

	.copon-box,
	{
	padding: 28rpx 32rpx;
	box-sizing: border-box;

	}

	.order-list {
		padding-top: 28rpx;
	}

	.list-item {
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;

		.item-left {
			width: 208rpx;
			height: 160rpx;
			background: linear-gradient(146deg, #FFF0CD 0%, #FDE4B8 100%);
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			color: #EE241D;
		}


		.btn {
			width: 142rpx;
			height: 48rpx;
			background: linear-gradient(270deg, #FFF0CD 0%, #FDE4B8 100%);
			box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(233, 222, 204, 0.2), 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #EE241D;
		}
	}

	.copon-list-box {
		margin-top: 28rpx;
		padding: 8rpx 30rpx 8rpx 46rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}

	.flex-list-box {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0 0 0;
		padding-bottom: 20rpx;

	}

	.list-left {
		width: 30%;
		text-align: lefr;
	}

	.list-center {
		width: 30%;
		text-align: center;
	}

	.list-right {
		width: 40%;
		text-align: center;
	}

	.text-blue {
		color: #0785CF;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;

		.padding12 {
			margin-top: 12rpx;
		}

		.order-dot {
			width: 8rpx;
			height: 8rpx;
			background: #FF4141;
			border-radius: 8px;
			margin-right: 20rpx;
		}

		.arrow-right {
			width: 28rpx;
			height: 28rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: top;
			}
		}

		.order-img-box {
			padding: 24rpx 0 0 0;
			display: flex;
		}

		.order-img {
			width: 120rpx;
			height: 120rpx;
			margin: 0 28rpx 0 28rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.order-tips {
			color: #0785CF;
		}

		.btn-top {
			margin-top: 10rpx;
			padding-left: 28rpx;
		}


	}
</style>